<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <link rel="stylesheet" href="../css/shoppingcar.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div style="border-bottom:2px solid #ff6700;">
        <div class="shoppingcar_top">
            <div>
                <div class="header_logo"><img src="../images/logo.png" alt=""></div>
                <h2>我的购物车</h2>
                <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算 </p>
            </div>
            <div>
                <a href="../html/regist.html">登录</a> | <a href="../html/regist.html">注册</a>
            </div>
        </div>
    </div>
    <div style="background-color: #f5f5f5;">
        <div class="shoppingcar_middle_top">
            <div class="goods_top">
                <div class="goods_top_one">
                    <input type="checkbox" name="" id="" class="checkAll"> 全选
                </div>
                <div class="goods_top_two"></div>
                <div class="goods_top_three">商品名称</div>
                <div class="goods_top_four">单价(元)</div>
                <div class="goods_top_five">数量</div>
                <div class="goods_top_six">小计(元)</div>
                <div class="goods_top_seven">操作</div>
            </div>
        </div>
        <div class="shoppingcar_middle">

        </div>
        <div class="shoppingcar_middle_bottom">
            <div class="total">
                <div>
                    <a href="../html/index.html">继续购物</a>
                    <span>已选择 <i id="selectedTotal" style="color: #f25807;">0</i>  件</span>
                </div>
                <div style="color: #ff6700;">合计：<span id="priceTotal" style="font-size: 24px;">0</span>元 <a href="" class="jiesuan">去结算</a> </div>
            </div>
        </div>
    </div>

    <div class="alert">
        <div class="is_del">
            <div class="is_del_top">
                <div>
                    <div class="quxiao">×</div>
                </div>
                <p>确定删除吗？</p>
            </div>
            <div class="is_del_bottom">
                <div class="confirm">确定</div>
                <div class="cancel">取消</div>
            </div>
        </div>
    </div>

</body>
<script>
    $(".header_logo").click(function() {
        location.href = "../html/index.html"
    })
    if (getCookie("id")) {
        var id = getCookie("id");
        $.post("../php/shoppingcar_show.php", {
            id: id
        }, function(data) {
            var result = JSON.parse(data);
            var html = "";
            result.forEach(({
                id,
                gid,
                imgid,
                price,
                num,
                title
            }) => {
                html += `
                <div class="goods_top goodsone" data-id="${gid}">
                    <div class="goods_top_one" >
                        <input type="checkbox" name="" id="" class="checkOne">
                    </div>
                    <div class="goods_top_two goodsimg">
                        <img src="${imgid}" alt="">
                    </div>
                    <div class="goods_top_three goodstitle">
                        ${title}
                    </div>
                    <div class="goods_top_four goodsprice">
                        ${price}
                    </div>
                    <div class="goods_top_five goodsnum">
                        <div class="goodsnum_div">
                                <div class="reduce">
                                -
                                </div>
                                <div class="num">
                                ${num}
                                </div>
                                <div class="add">
                                +
                                </div>
                        </div>
                    </div>
                    <div class="goods_top_six goodspriceall">
                        ${price*num}
                    </div>
                    <div class="goods_top_seven goodsdel">
                        ×
                    </div>
                </div>
            `
            });
            $(".shoppingcar_middle").html(html);

            var num;
            $(".checkAll").click(function() {
                $(".checkOne").prop("checked", $(this).prop("checked"));
                getTotal();
                if ($(".checkOne:checked").length > 0) {
                    $(".jiesuan").css({
                        backgroundColor: "#ff6700",
                        color: "#ffffff"
                    })
                } else {
                    $(".jiesuan").css({
                        backgroundColor: "#e0e0e0",
                        color: "#b5b0b0"
                    })
                }

            })


            $(".checkOne").click(function() {
                if ($(".checkOne:checked").length == $(".checkOne").length) {
                    $(".checkAll").prop("checked", true);
                } else {
                    $(".checkAll").prop("checked", false);
                }
                getTotal();
                if ($(".checkOne:checked").length > 0) {
                    $(".jiesuan").css({
                        backgroundColor: "#ff6700",
                        color: "#ffffff"
                    })
                } else {
                    $(".jiesuan").css({
                        backgroundColor: "#e0e0e0",
                        color: "#b5b0b0"
                    })
                }
            })

            $(".reduce").click(function() {
                num = $(this).next().text() * 1;
                num--;
                var gid = $(this).parents(".goodsone").attr("data-id");
                console.log(num);
                console.log(id);
                console.log($(this).parents(".goodsone").attr("data-id"));
                $.post("../php/shoppingcar_reduce.php", {
                    id: id,
                    gid: gid,
                    num: num
                }, function() {})
                if (num >= 1) {
                    $(this).next().text(num);
                    var price = $(this).parent().parent().prev().text() * 1;
                    $(this).parent().parent().next(".goodspriceall").text((price * num).toFixed(2));
                }
                getTotal();
            });


            $(".add").click(function() {
                num = $(this).prev().text() * 1;
                num++;
                var gid = $(this).parents(".goodsone").attr("data-id");
                console.log(num);
                console.log(id);
                console.log($(this).parents(".goodsone").attr("data-id"));
                $.post("../php/shoppingcar_reduce.php", {
                    id: id,
                    gid: gid,
                    num: num
                }, function() {})
                $(this).prev().text(num);
                var price = $(this).parent().parent().prev().text() * 1;
                $(this).parent().parent().next(".goodspriceall").text((price * num).toFixed(2));
                getTotal();
            });


            $(".goodsdel").click(function() {
                var hh = $(this).parent().attr("data-id");
                $(".alert").css({
                    display: "block"
                })
                $(".quxiao").click(function() {
                    $(".alert").css({
                        display: "none"
                    })
                })
                $(".cancel").click(function() {
                    $(".alert").css({
                        display: "none"
                    })
                })
                $(".confirm").click(() => {
                    $(this).parent().remove();
                    $.post("../php/shoppingcar_del.php", {
                        id: id,
                        gid: hh
                    }, function(data) {
                        $(".alert").css({
                            display: "none"
                        });
                    })
                    isallchecked();
                })
                getTotal();
            });


            function isallchecked() {
                var flag = $(".checkOne").is(":not(:checked)");
                $(".checkAll").prop("checked", $(".checkOne").length > 0 ? !flag : false);
            }

            function getTotal() {
                var sum = 0;
                var priceTotal = 0;
                $(".checkOne:checked").parents(".goodsone").each(function() {
                    var sum1 = $(this).find(".num").text() * 1;
                    var subtotal = $(this).find(".goodspriceall").text() * 1;
                    sum += sum1;
                    priceTotal += subtotal;
                })
                $("#selectedTotal").text(sum);
                $("#priceTotal").text(priceTotal.toFixed(2));
            }
        })
    }
</script>

</html>